 <html>
<head>		  
      <title>CTV Jenkins Builder</title>
      <meta http-equiv="content-type" content="text/html; charset=utf-8"></meta>
      <meta http-equiv="encoding"     content="utf-8"></meta>
      <link rel="stylesheet" type="text/css" media="screen" href="css/bootstrap_cerulean.css" />
      <link rel="stylesheet" type="text/css" media="screen" href="css/stickFooter.css" />

      <style>
          .modal {
            display: none;
            position: fixed;
            z-index: 2001;
            top: 0;
            left 0;
            height: 100%;
            weight: 100%;
            background: rgba( 0,0,0,.7)
                        url('/admin/images/loading/loading.gif')
                        50% 50%
                        no-repeat;
          }  
          body.loading {
            overflow: hidden;
          }
          body.loading .modal {
            display: block;
          }
          .manualHover {
              background-color: #2FA4E7;
              color: #FFFFFF !important;
              text-decoration: none;
          }
      </style>
</head>
<body>
	<div id="wrap">
      <nav id="nav-bar" class="navbar navbar-inverse" role="navigation" style="border-radius:0px;">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse" id="toggleBtn">
          <span class="sr_only"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>       
        <a class="navbar-brand" href="#" onclick="serverReload();">SED-CTV</a>
      </div> 
      
      <div id="empNavbar" class="collapse navbar-collapse navbar-inverse-collapse" data-parent="#nav-bar">
        <ul class="nav navbar-nav">
          <li><a id="mapEngines"  href="#">Home</a></li>
          <li><a id="wmsConfig" href="#">About</a></li>
          <li><a id="mapToolConfig" href="#">Contact</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Settings <span class="caret"></span></a>
            <ul class="dropdown-menu">            
              <li><a href="#">Action</a></li>
              <li><a href="#">Another action</a></li>
              <li><a href="#">Something else here</a></li>
              <li class="divider"></li>
              <li class="nav-header">Import/Export</li>
              <li><a href="#">Import</a></li>
              <li><a href="#">Export</a></li>
              <li class="divider"></li>
              <li class="nav-header">Nav header</li>
              <li><a href="#">Separated link</a></li>
              <li><a href="#">One more separated link</a></li>
            </ul>           
          </li>
        </ul>       
        <ul class="nav navbar-nav pull-right" style="margin-top: 5px;">
          <li class="dropdown" >
            <a href="#" class="dropdown-toggle pull-right" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span></a>
            <ul class="dropdown-menu pull-right">
              <li><a id="import" href="#"><span class="glyphicon glyphicon-import"></span> Import Database</a></li>
              <li><a id="export" href="#" download="map-config.json" onclick="exportConfig()"><span class="glyphicon glyphicon-export"></span> Export Database</a></li>

              <li class="divider"></li>
              <li class="nav-header">Data Configurations</li>
              <li><a id="import" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Import Data</a></li>
              <li><a id="export" href="#" download="map-config.json" onclick="exportConfig()"><span class="glyphicon glyphicon-export"></span> Export Data</a></li>


              <li class="divider"></li>
              <li class="nav-header">Data Configurations</li>
              <li><a id="importLink" href="javascript:void(0)"><span class="glyphicon glyphicon-import"></span> Import ME HOMIE</a></li>              
              <li><div id="43"></div></li>
            </ul>
          </li>         
        </ul>                                 
      </div>
    </nav>
      
      
		<div class="container">			
			<div>
				<form id="myform" class="form-horizontal" method="POST" target="index.html">
				  <fieldset>
					<legend>SED-CTV Jenkins Branch Builder</legend>
					<div class="form-group">
					  <label for="inputBranchName" class="col-lg-2 control-label">Branch Name:</label>
					  <div class="col-lg-10">
						<input type="text" class="form-control" id="inputBranchName" placeholder="SEDCTV-###">
					  </div>
					</div>
					
					<div class="form-group">
					  <div class="col-lg-10 col-lg-offset-2">
						<button type="submit" class="btn btn-primary">Build</button>
					  </div>
					</div>
				  </fieldset>
				</form>				
				
				<button id="Cancel" class="btn btn-danger" >Cancel</button>
				<button id="subForm" class="btn btn-info" onclick="jqueryPost()">Cancel2</button>
			</div>	

			<br /> <br />
			<div>
				<form id="myform2" class="form-horizontal" method="POST" target="index.html">
				  <fieldset>
					<legend>SED-CTV Jenkins Branch Builder</legend>
					<div class="form-group">
					  <label for="inputBranchName2" class="col-lg-2 control-label">Branch Name:</label>
					  <div class="col-lg-10">
						<input type="text" class="form-control" id="inputBranchName2" placeholder="SEDCTV-###">
					  </div>
					</div>
					
					<div class="form-group">
					  <div class="col-lg-10 col-lg-offset-2">
						<button type="submit" class="btn btn-primary">Build</button>
					  </div>
					</div>
				  </fieldset>
				</form>								
				<button id="go" class="btn btn-danger">GO!</button>
			</div>				
		</div>
		
		<div id="alertBox" class="alert alert-dismissable alert-info">
			<button type="button" class="close" data-dismiss="alert">×</button>
			<strong>Well done!</strong> Jenkins trigger has been sent
		</div>
		<div id="push"></div>
	</div>
    
    <div id="footer" class="navbar-inverse">
      <div class="container">
        <p class="text-muted credit">SED-CTV: 
          <a href="#">Trigger Parametrized Jenkins Builds</a> and 
          <a href="#">other any other capabilities coming soon.</a>.
        </p>
      </div>
    </div>


    <script type='text/javascript' src="js/jquery-1.10.2.min.js"></script>
    <script type='text/javascript' src="js/bootstrap.min.js"></script>
    <script type='text/javascript' src="js/fileUpload.js"></script>

	<script type='text/javascript'> 
	var baseUrl = "https://jenkins.di2e.net/job/SED-CTV-paramBuild/buildWithParameters";
	var reqUrl = "";
	
	$( "#Cancel" ).click(function() {
		alert( "Handler for .click() called." );
		
		var param = '?BRANCH_NAME=' + $("#inputBranchName").val();
		reqUrl = baseUrl + param;
		
		//postAjax();
		// request();
		holyshit();
	});
	
	$( "#go" ).click(function() {		
		var param = '?BRANCH_NAME=' + $("#inputBranchName").val();
		reqUrl = baseUrl + param;		
		postAjax();
	});
	
	$('#alertBox').hide();
	
	$(function() {
		$('myform2').submit(function() {
			$.ajax({
				type: 'POST',
				url: reqUrl
			});
			return false;
		}); 
	});
	
		function postAjax() {
			var param = '?branchName=' + $("#inputBranchName2").val();
			var ur = "http://localhost:8080/Jenkins/sedctv-jenkins/build" + param;
			$.ajax({
				type: "GET",
				url: ur,
				success: function() {
					var msg = "Well done! Jenkins trigger has been sent "; 
					$( "#alert" ).html( msg );
				}, error: function(xhr, status, error) {
				  var err = eval("(" + xhr.responseText + ")");
				  alert(err);
				}
			});
		}				
	/*	
		$(document).ready(function() {
			var $form = $('#myform');
			$form.submit( function() {		   
				$('#myform').attr( "action", reqUrl );
				$.post($(this).attr('action'), $(this).serialize(), function(response){
						// do something here on success
				},'json');
				return false;
		   });
		});*/
		
		function holyshit() {
			var no = "No";
			$('#myform').attr( "action", reqUrl ).submit();/* function( event ) {				
				event.preventDefault(); // disable default submit behaviour of the browser
				$.post($('#myform').attr('action'), $('#myform').serialize(), function( response ){
						// do something here on success
				  },'json');
				  return false;
			});*/
			
/*			$('#myform').live('submit', function(){
				  $.post($(this).attr('action'), $(this).serialize(), function(response){
						// do something here on success
				  },'json');
				  return false;
			   });*/
			   return false;
		}
		
		function UpdateAlertBox() {
			$( "#alertBox" ).fadeIn( "slow", function() {
				$( "#alertBox" ).fadeOut( "slow" );
		  });
		}
		
		function jqueryPost() {
			$.post( reqUrl, function( data ) {
				var msg = "Well done! Jenkins trigger has been sent ";				
				$( "#alert" ).html( msg );
			});
		}
		
		function request() {
			$.ajax({		
				url: reqUrl,
				type: "POST",
				data: "{\"parameter\": [{\"BRANCH_NAME\": \"" + $("#inputBranchName").val() +"\"}",
				
				error: function(response) {
					alert(response.statusText);
				}
			})
		};
		
		function go() {
			var xhr = new XMLHttpRequest({mozSystem: true});
			$.ajax({                              
				type: "POST",
				url: reqUrl,
				success: function(data) {
					alert("GO SUCCESS");
				},             
				complete: function(xhr, statusText){
					alert("GO ERROR");
				}                                                                 
			});
		}
		
		function nonJqueryAjax() {
			var http = new XMLHttpRequest();
			
			var params = 'BRANCH_NAME=' + $("#inputBranchName");			
			http.open("POST", reqUrl, false);

			//Send the proper header information along with the request
			http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			http.setRequestHeader("Content-length", params.length);
			http.setRequestHeader("Connection", "close");

			http.onreadystatechange = function() {//Call a function when the state changes.
				if(http.readyState == 4 && http.status == 200) {
					alert(http.responseText);
				}
			}
			http.send();
		}
	</script>
	
 <script type='text/javascript'> 
    var importUrl = "http://localhost:8080/map-config/admin/mapengine/config/import";
    createButton($('#33'), 'Import File', ' btn btn-success', importUrl, "POST");
    createLink($('#43'), $('#importLink'), 'Import Data', '', importUrl, "POST");

    function createButton(elem,value,cssClasses,url,method) {
          var div  = $('<div id="uploadDiv"></div>').appendTo(elem);
          var anch = $('<a id="browse-btn" href="javascript:void(0)" class="' + cssClasses +'" >'+ value +'</a>').appendTo(div);

          var height = ( anch.outerHeight() <= 0 ) ? 25  : anch.outerHeight();
          var width  = ( anch.outerWidth()  <= 0 ) ? 159 : anch.outerWidth();
          var posTop = ( height * -1 );

          var form = $('<form id="uploadForm" enctype="multipart/form-data" action="'+url+'" method="'+method+'"></form').appendTo(div).css({
            'height' : '0px'
          });          
          
          var input = $('<input name="fileInput" type="file" />').appendTo(form).css({
              'position': 'relative',
              'overflow': 'hidden',
              '-moz-opacity': '0',
              'filter':  'alpha(opacity: 0)',
              'opacity': '0',
              'z-index': '1002',
              'height' : height,
              'width' : width,
              'cursor' : 'pointer',              
              'top'   : posTop
            }).hover(function() {
              anch.addClass("manualHover");
            }, function() {
              anch.removeClass("manualHover");
            });

        };

          $( "#uploadForm" ).on( "change", function() {
            $( this ).submit();
          });

    function createLink(elem,anchor,value,cssClasses,url,method) {
          var div  = $('<div id="uploadDiv"></div>').appendTo(elem);
          var anch = ( anchor === undefined ) ? $('<a id="browse-btn" href="javascript:void(0)" class="' + cssClasses +'" >'+ value +'</a>').appendTo(div) : anchor;

          var height = 25;
          var width  = 159;
          var posTop = ( height * -1 );              

          var form = $('<form id="uploadForm" enctype="multipart/form-data" action="'+url+'" method="'+method+'"></form').appendTo(div).css({
            'height' : '0px'
          });          

          var input = $('<input id="fileInput" name="fileInput" type="file" />').appendTo(form).css({
              'position': 'relative',
              'overflow': 'hidden',
              '-moz-opacity': '0',
              'filter':  'alpha(opacity: 0)',
              'opacity': '0',
              'z-index': '1002',
              'height' : height,
              'width'  : width,
              'cursor' : 'pointer',              
              'top'    : posTop
            }).hover(function() {
              anchor.addClass("manualHover");
            }, function() {
              anchor.removeClass("manualHover");
            });
        };
        
      </script>

    <script>
      $('a#fileBrowser').file().choose(function(e, inp) {
        // we make a hidden form and append it to body. Replace example.com with your server.
        var form = $('<form method="POST" enctype="multipart/form-data" action="http://localhost:8080/map-config/admin/mapengine/config/import" target="hidden"></form>').hide().appendTo('body');
         
        inp.attr('name', 'file-upload'); // its REQUIRED to give the input a name for the browser to submit it
        form.append(inp).submit();
      });


      $('a#importBrowser').file().choose(function(e, inp) {
        // we make a hidden form and append it to body. Replace example.com with your server.
        var form = $('<form method="POST" enctype="multipart/form-data" action="http://localhost:8080/map-config/admin/mapengine/config/import" target="hidden"></form>').hide().appendTo('body');
         
        inp.attr('name', 'file-upload'); // its REQUIRED to give the input a name for the browser to submit it
        form.append(inp).submit();
      });


      $('.modal').modal('hide');
    </script>
</body>
</html>